<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>a</title>
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<script type="text/javascript" src="js/Detector.js"></script>
		<script type="text/javascript" src="js/tracking-min.js"></script>
		<script type="text/javascript" src="js/util.js"></script>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				border: 0;
			}
			
			iframe {
				width: 100%;
				margin: 0;
				border: 0;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}
			
			pre {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 20;
				background-color: #000000;
				color: #FFFFFF;
			}
			
			#canvas {
				position: absolute;
				top: 0;
				/*bottom: 0;*/
				left: 0;
				/*right: 0;*/
			}
			
			#video {
				position: absolute;
				top: 0;
				left: 0;
				/*bottom: 0;
				right: 0;*/
			}
		</style>
	</head>

	<body>
		<!--<!--<div id="body">-->
		<pre id="predata">out</pre>
		<!--<canvas id="canvas"></canvas>-->
		<video id="video" autoplay muted></video>
		<iframe id="vr" src="vr.html" scrolling="no" frameborder="no"></iframe>

		<script>
			window.onload = function() {
				var w,h;
				var video = document.getElementById('video');
				var timer;
				var canvas = document.createElement('canvas');
				var context = canvas.getContext('2d');
				var descriptors;
				
				//获取原始对比数据
				initMatch();
				var imagePath = "assets/oldman.png";
				convertImgToImgData(imagePath, function(imgData) {
					descriptors = getDescriptors(imgData);
					console.log("imgData" + imgData);
				});

				navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
				window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

				MediaStreamTrack.getSources(function(sourceInfos) {
					var videoSource = null;
					for(var i = 0; i != sourceInfos.length; ++i) {
						var sourceInfo = sourceInfos[i];
						if(sourceInfo.kind === 'video') {
							console.log(sourceInfo.id, sourceInfo.label || 'camera');
							window.log(sourceInfo.id + "   " + sourceInfo.label || 'camera');
							videoSource = sourceInfo.id;
						}
					}
					sourceSelected(videoSource);
				});

				function sourceSelected(videoSource) {
					var constraints = {
						video: {
//							mandatory: {
//								minWidth: cw,
//								minHeight: ch
//							},
							optional: [{
								sourceId: videoSource
//							}, {
//								minWidth: cw
//							}, {
//								minHeight: ch
							}],

						}
					};

					if(navigator.getUserMedia) {
						navigator.getUserMedia(constraints, onSuccess, onError);
					} else {
						alert('Native device media streaming (getUserMedia) not supported in this browser.');
					}
				}

				function onSuccess(stream) {
					if(window.URL) {
						video.src = window.URL.createObjectURL(stream);
					} else {
						video.src = stream;
					}
					video.onloadedmetadata = function() {
						w = canvas.width = video.videoWidth;
						h = canvas.height = video.videoHeight;
					};
					drawCanvas();
				}

				function onError(err) {
					alert('getUserMedia error: ' + err)
				}

				function drawCanvas() {
					timer = window.setInterval(function() { //把当前视频帧内容渲染到画布上        
						context.drawImage(video, 0, 0, w, h); //, canvas.width, canvas.height
						compareImg();
					}, 1000);
				}

				function compareImg() {
					var frameData = context.getImageData(0, 0, canvas.width, canvas.height);
					if(descriptors) {
						var newDesc = getDescriptors(frameData);
						var deviation = doMatch(descriptors, newDesc);
						window.print(deviation + "");
						if(Math.abs(deviation) < 0.009) {
							if(Detector.webgl) {
								var iframe = document.getElementById('vr');
								iframe.style.display = "block";
								iframe.height = document.documentElement.clientHeight;
								window.clearInterval(timer);
								window.showOldMan = true;
							} else {
								alert("unsupport webgl");
							}
							//								alert("发现圣诞老人");
						}
					}
				}
			};
		</script>
	</body>

</html>